<template>
  <div class="user-management">
    <div class="header-with-back">
      <button class="back-btn" @click="$emit('back')">
        <el-icon><ArrowLeft /></el-icon> 返回
      </button>
      <h1 class="page-title">用户管理</h1>
    </div>
    
    <!-- 筛选和搜索 -->
    <div class="filter-bar">
      <div class="search-box">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="搜索用户名、姓名或学号"
          @input="handleSearch"
        />
        <button class="search-btn">
          <el-icon><Search /></el-icon>
        </button>
      </div>
      
      <button class="create-user-btn" @click="showCreateUserModal = true">
        <el-icon><Plus /></el-icon> 添加用户
      </button>
      
      <div class="filters">
        <div class="filter">
          <select v-model="filters.status" @change="fetchUsers">
            <option value="">所有状态</option>
            <option value="active">正常</option>
            <option value="suspended">已封禁</option>
          </select>
        </div>
        
        <div class="filter">
          <select v-model="filters.role" @change="fetchUsers">
            <option value="">所有角色</option>
            <option value="student">学生</option>
            <option value="admin">管理员</option>
          </select>
        </div>
        
        <div class="filter">
          <select v-model="filters.sortBy" @change="handleSortChange">
            <option value="created_at">注册时间</option>
            <option value="username">用户名</option>
            <option value="login_at">最近登录</option>
            <option value="id">用户ID</option>
          </select>
        </div>
        
        <div class="filter">
          <select v-model="filters.orderBy" @change="handleSortChange">
            <option value="desc">降序</option>
            <option value="asc">升序</option>
          </select>
        </div>
      </div>
    </div>
    
    <LoadingSpinner v-if="isLoading" message="加载用户数据..." />
    
    <!-- 用户列表 -->
    <div v-else class="user-list">
      <table>
        <thead>
          <tr>
            <th @click="toggleIdSort" class="sortable-header">
              ID
              <span class="sort-indicator" v-if="filters.sortBy === 'id'">
                {{ filters.orderBy === 'asc' ? '↑' : '↓' }}
              </span>
            </th>
            <th>用户名</th>
            <th>真实姓名</th>
            <th>学号</th>
            <th>联系方式</th>
            <th>角色</th>
            <th>状态</th>
            <th>注册时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in users" :key="user.id">
            <td>{{ user.id }}</td>
            <td>
              {{ user.username }}
              <span v-if="Number(user.id) === Number(currentUserId)" class="current-user-badge">当前用户</span>
            </td>
            <td>{{ user.realName }}</td>
            <td>{{ user.studentId || '-' }}</td>
            <td>
              <div v-if="user.email || user.phone || user.wechat">
                <div v-if="user.email">邮箱: {{ user.email }}</div>
                <div v-if="user.phone">电话: {{ user.phone }}</div>
                <div v-if="user.wechat">微信: {{ user.wechat }}</div>
              </div>
              <span v-else>-</span>
            </td>
            <td>
              <span class="badge" :class="user.role === 'admin' ? 'badge-admin' : 'badge-student'">
                {{ user.role === 'admin' ? '管理员' : '学生' }}
              </span>
              <button 
                class="action-btn role-btn"
                :title="user.role === 'admin' ? '降级为学生' : '提升为管理员'"
                @click="toggleUserRole(user)"
              >
                <el-icon><Edit /></el-icon>
              </button>
            </td>
            <td>
              <span class="badge" :class="user.status === 'active' ? 'badge-active' : 'badge-suspended'">
                {{ user.status === 'active' ? '正常' : '已封禁' }}
              </span>
            </td>
            <td>{{ formatDate(user.createdAt) }}</td>
            <td>
              <div class="actions">
                <button class="action-btn view-btn" @click="viewUserDetail(user.id)">
                  <el-icon><InfoFilled /></el-icon>
                </button>
                <button 
                  class="action-btn" 
                  :class="user.status === 'active' ? 'ban-btn' : 'unban-btn'"
                  @click="toggleUserStatus(user)"
                >
                  <el-icon v-if="user.status === 'active'"><CircleCloseFilled /></el-icon>
                  <el-icon v-else><Check /></el-icon>
                </button>
                <button class="action-btn reset-btn" @click="resetPassword(user.id)">
                  <el-icon><Operation /></el-icon>
                </button>
                <button class="action-btn delete-btn" @click="confirmDelete(user)">
                  <el-icon><Delete /></el-icon>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <!-- 分页 -->
    <div class="pagination">
      <button 
        class="pagination-btn" 
        :disabled="currentPage === 1"
        @click="changePage(currentPage - 1)"
      >
        <el-icon><ArrowLeft /></el-icon>
      </button>
      
      <span class="page-info">第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
      
      <button 
        class="pagination-btn" 
        :disabled="currentPage === totalPages"
        @click="changePage(currentPage + 1)"
      >
        <el-icon><ArrowRight /></el-icon>
      </button>
    </div>
    
    <!-- 用户详情弹窗 -->
    <div v-if="showUserDetail" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>用户详情</h2>
          <button class="close-btn" @click="showUserDetail = false">
            <el-icon><Close /></el-icon>
          </button>
        </div>
        
        <div class="modal-body" v-if="selectedUser">
          <div class="user-detail">
            <div class="detail-row">
              <div class="detail-label">用户ID:</div>
              <div class="detail-value">{{ selectedUser.id }}</div>
            </div>
            
            <div class="detail-row">
              <div class="detail-label">用户名:</div>
              <div class="detail-value">{{ selectedUser.username }}</div>
            </div>
            
            <div class="detail-row">
              <div class="detail-label">真实姓名:</div>
              <div class="detail-value">{{ selectedUser.realName }}</div>
            </div>
            
            <div class="detail-row">
              <div class="detail-label">学号:</div>
              <div class="detail-value">{{ selectedUser.studentId || '-' }}</div>
            </div>
            
            <div class="detail-row">
              <div class="detail-label">院系:</div>
              <div class="detail-value">{{ selectedUser.department || '-' }}</div>
            </div>
            
            <div class="detail-row">
              <div class="detail-label">邮箱:</div>
              <div class="detail-value">{{ selectedUser.email || '-' }}</div>
            </div>
            
            <div class="detail-row">
              <div class="detail-label">电话:</div>
              <div class="detail-value">{{ selectedUser.phone || '-' }}</div>
            </div>
            
            <div class="detail-row">
              <div class="detail-label">微信:</div>
              <div class="detail-value">{{ selectedUser.wechat || '-' }}</div>
            </div>
            
            <div class="detail-row">
              <div class="detail-label">角色:</div>
              <div class="detail-value">{{ selectedUser.role === 'admin' ? '管理员' : '学生' }}</div>
            </div>
            
            <div class="detail-row">
              <div class="detail-label">状态:</div>
              <div class="detail-value">{{ selectedUser.status === 'active' ? '正常' : '已封禁' }}</div>
            </div>
            
            <div class="detail-row">
              <div class="detail-label">注册时间:</div>
              <div class="detail-value">{{ formatDate(selectedUser.createdAt) }}</div>
            </div>
            
            <div class="detail-row">
              <div class="detail-label">最后登录:</div>
              <div class="detail-value">{{ selectedUser.lastLoginAt ? formatDate(selectedUser.lastLoginAt) : '从未登录' }}</div>
            </div>
            
            <div class="detail-row">
              <div class="detail-label">个人简介:</div>
              <div class="detail-value bio">{{ selectedUser.bio || '暂无简介' }}</div>
            </div>
          </div>
          
          <div class="user-stats">
            <h3>用户统计</h3>
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-value">{{ selectedUser.stats?.bookCount || 0 }}</div>
                <div class="stat-label">发布图书</div>
              </div>
              
              <div class="stat-item">
                <div class="stat-value">{{ selectedUser.stats?.soldCount || 0 }}</div>
                <div class="stat-label">售出数量</div>
              </div>
              
              <div class="stat-item">
                <div class="stat-value">{{ selectedUser.stats?.boughtCount || 0 }}</div>
                <div class="stat-label">购买数量</div>
              </div>
              
              <div class="stat-item">
                <div class="stat-value">{{ selectedUser.stats?.favoriteCount || 0 }}</div>
                <div class="stat-label">收藏数量</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="btn btn-cancel" @click="showUserDetail = false">关闭</button>
          <button 
            class="btn" 
            :class="selectedUser?.status === 'active' ? 'btn-danger' : 'btn-success'"
            @click="toggleUserStatus(selectedUser)"
          >
            {{ selectedUser?.status === 'active' ? '封禁用户' : '解除封禁' }}
          </button>
          <button 
            class="btn btn-info" 
            @click="toggleUserRole(selectedUser)"
          >
            {{ selectedUser?.role === 'admin' ? '降级为学生' : '提升为管理员' }}
          </button>
          <button class="btn btn-warning" @click="resetPassword(selectedUser?.id)">重置密码</button>
        </div>
      </div>
    </div>
    
    <!-- Toast通知组件 -->
    <Toast 
      :message="toastMessage" 
      :type="toastType" 
      :visible="showToast" 
      @close="showToast = false" 
    />
    
    <!-- 创建用户模态框 -->
    <Modal v-model="showCreateUserModal" title="添加新用户" width="500px">
      <div class="form-group">
        <div class="form-note">
          请填写以下必要信息创建新用户，用户可在后续登录后自行完善个人资料
        </div>
        
        <div class="form-row">
          <div class="form-field">
            <label>用户名 <span class="required">*</span></label>
            <input type="text" v-model="newUser.username" placeholder="请输入用户名" required />
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-field">
            <label>角色 <span class="required">*</span></label>
            <select v-model="newUser.role" required>
              <option value="student">学生</option>
              <option value="admin">管理员</option>
            </select>
          </div>
        </div>
      </div>
      
      <template #footer>
        <button class="btn btn-cancel" @click="showCreateUserModal = false">取消</button>
        <button class="btn btn-primary" @click="createUser">创建用户</button>
      </template>
    </Modal>
    
    <!-- 删除用户确认模态框 -->
    <Modal v-model="showDeleteConfirm" title="确认删除用户" width="400px">
      <div v-if="userToDelete" class="confirm-content">
        <p>
          您确定要删除用户 <strong>{{ userToDelete.username }}</strong> 吗？
        </p>
        <p class="text-danger">此操作不可撤销，用户的所有数据将被永久删除。</p>
      </div>
      
      <template #footer>
        <button class="btn btn-cancel" @click="showDeleteConfirm = false">取消</button>
        <button class="btn btn-danger" @click="deleteUser">删除</button>
      </template>
    </Modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import api from '@/api/apiClient'
import Toast from '@/components/Toast.vue'
import LoadingSpinner from '@/components/LoadingSpinner.vue'
import Modal from '@/components/Modal.vue'
import { 
  ArrowLeft,
  Search,
  InfoFilled,
  CircleCloseFilled,
  Check,
  Operation,
  ArrowRight,
  Close,
  Edit,
  Plus,
  Delete
} from '@element-plus/icons-vue'

// 定义事件
defineEmits(['back'])

// 用户列表
const users = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const totalPages = ref(1)
const totalUsers = ref(0)
const isLoading = ref(true)
const currentUserId = ref(null) // 当前登录用户ID

// 筛选和搜索
const searchQuery = ref('')
const filters = reactive({
  status: '',
  role: '',
  sortBy: 'id',
  orderBy: 'asc'
})

// 用户详情
const showUserDetail = ref(false)
const selectedUser = ref(null)

// 创建用户模态框
const showCreateUserModal = ref(false)
const newUser = reactive({
  username: '',
  role: 'student'
})

// 删除用户确认
const userToDelete = ref(null)
const showDeleteConfirm = ref(false)

// Toast通知
const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('info')

// 显示通知
const showNotification = (message, type = 'info') => {
  toastMessage.value = message
  toastType.value = type
  showToast.value = true
}

// 获取用户列表
const fetchUsers = async () => {
  isLoading.value = true
  try {
    const params = {
      page: currentPage.value,
      limit: pageSize.value,
      status: filters.status,
      role: filters.role,
      sortBy: filters.sortBy,
      orderBy: filters.orderBy,
      noAvatar: true
    }
    
    if (searchQuery.value) {
      params.query = searchQuery.value
    }
    
    console.log('发送用户列表请求参数:', params)
    
    const response = await api.admin.getUserList(params)
    users.value = response.users
    totalUsers.value = response.total
    totalPages.value = Math.ceil(response.total / pageSize.value)
  } catch (error) {
    console.error('获取用户列表失败:', error)
    showNotification('获取用户列表失败', 'error')
  } finally {
    isLoading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  // 使用防抖，避免频繁请求
  if (searchTimeout) clearTimeout(searchTimeout)
  searchTimeout = setTimeout(() => {
    currentPage.value = 1
    fetchUsers()
  }, 500)
}

let searchTimeout = null

// 分页处理
const changePage = (page) => {
  if (page < 1 || page > totalPages.value) return
  currentPage.value = page
  fetchUsers()
}

// 查看用户详情
const viewUserDetail = async (userId) => {
  try {
    // 获取详细用户信息，不要求头像数据
    const user = await api.admin.getUserDetail(userId, { noAvatar: true })
    selectedUser.value = user
    showUserDetail.value = true
  } catch (error) {
    console.error('获取用户详情失败:', error)
    showNotification('获取用户详情失败', 'error')
  }
}

// 切换用户状态（封禁/解封）
const toggleUserStatus = async (user) => {
  if (!user) return
  
  // 检查是否是当前用户，防止自己封禁自己
  console.log('toggleUserStatus 当前用户ID:', currentUserId.value, '目标用户ID:', user.id, '是否相同:', user.id === currentUserId.value)
  
  // 统一转换为数字进行比较
  const currentId = Number(currentUserId.value)
  const targetId = Number(user.id)
  
  if (currentId === targetId) {
    showNotification('不能封禁或解封自己的账号', 'error')
    console.log('阻止操作: 不能封禁自己的账号')
    return
  }
  
  try {
    const newStatus = user.status === 'active' ? 'suspended' : 'active'
    await api.admin.updateUserStatus(user.id, newStatus)
    
    // 更新列表中的用户状态
    const index = users.value.findIndex(u => u.id === user.id)
    if (index !== -1) {
      users.value[index].status = newStatus
    }
    
    // 更新详情中的用户状态
    if (selectedUser.value && selectedUser.value.id === user.id) {
      selectedUser.value.status = newStatus
    }
    
    showNotification(
      `用户 ${user.username} ${newStatus === 'active' ? '已解除封禁' : '已被封禁'}`,
      'success'
    )
  } catch (error) {
    console.error('更新用户状态失败:', error)
    showNotification('更新用户状态失败', 'error')
  }
}

// 重置用户密码
const resetPassword = async (userId) => {
  if (!userId) return
  
  // 使用prompt让管理员输入新密码
  const newPassword = prompt('请输入新密码，或留空自动生成随机密码:')
  
  // 如果点击了取消按钮，则不进行操作
  if (newPassword === null) return
  
  try {
    const result = await api.admin.resetUserPassword(userId, newPassword)
    // 显示实际重置的密码（如果用户未输入，则API会生成随机密码）
    showNotification(`密码重置成功，新密码: ${result.newPassword || newPassword}`, 'success')
  } catch (error) {
    console.error('重置密码失败:', error)
    showNotification('重置密码失败', 'error')
  }
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 切换用户角色
const toggleUserRole = async (user) => {
  if (!user) return
  
  // 添加确认对话框
  const isAdmin = user.role === 'admin'
  const confirmMessage = isAdmin 
    ? `确定要将用户 ${user.username} 的角色从管理员降级为学生吗？` 
    : `确定要将用户 ${user.username} 的角色从学生提升为管理员吗？`
  
  if (!confirm(confirmMessage)) return
  
  try {
    const newRole = isAdmin ? 'student' : 'admin'
    await api.admin.updateUserRole(user.id, newRole)
    
    // 更新列表中的用户角色
    const index = users.value.findIndex(u => u.id === user.id)
    if (index !== -1) {
      users.value[index].role = newRole
    }
    
    // 更新详情中的用户角色
    if (selectedUser.value && selectedUser.value.id === user.id) {
      selectedUser.value.role = newRole
    }
    
    showNotification(
      `用户 ${user.username} 角色已更新为 ${newRole === 'admin' ? '管理员' : '学生'}`,
      'success'
    )
  } catch (error) {
    console.error('更新用户角色失败:', error)
    showNotification('更新用户角色失败', 'error')
  }
}

// 添加ID排序切换函数
const toggleIdSort = () => {
  if (filters.sortBy === 'id') {
    // 如果已经按ID排序，切换升序/降序
    filters.orderBy = filters.orderBy === 'asc' ? 'desc' : 'asc'
  } else {
    // 如果按其他字段排序，切换到按ID排序
    filters.sortBy = 'id'
    filters.orderBy = 'asc' // 默认升序
  }
  
  // 在前端对数据进行排序，而不是重新请求
  sortUsersByID()
}

// 处理排序变更
const handleSortChange = () => {
  // 如果是按ID排序，使用前端排序
  if (filters.sortBy === 'id') {
    sortUsersByID()
  } else {
    // 其他排序方式，通过API请求
    fetchUsers()
  }
}

// 前端实现ID排序
const sortUsersByID = () => {
  if (!users.value || users.value.length === 0) return
  
  users.value.sort((a, b) => {
    // 数字比较，转换为数字以确保正确排序
    const idA = Number(a.id)
    const idB = Number(b.id)
    
    if (filters.orderBy === 'asc') {
      return idA - idB // 升序
    } else {
      return idB - idA // 降序
    }
  })
  
  console.log(`已按ID ${filters.orderBy === 'asc' ? '升序' : '降序'}排序用户数据`)
}

// 创建新用户
const createUser = async () => {
  // 检查必填字段
  if (!newUser.username) {
    showNotification('用户名不能为空', 'error')
    return
  }
  
  try {
    // 确保只传递用户名和角色两个字段
    const userData = {
      username: newUser.username,
      role: newUser.role || 'student'
    }
    
    console.log('发送创建用户请求:', userData)
    await api.admin.createUser(userData)
    
    // 创建成功后重置表单
    newUser.username = ''
    newUser.role = 'student'
    
    // 关闭模态框
    showCreateUserModal.value = false
    
    // 刷新用户列表
    fetchUsers()
    
    showNotification('用户创建成功', 'success')
  } catch (error) {
    console.error('创建用户失败:', error)
    showNotification(error.message || '创建用户失败', 'error')
  }
}

// 确认删除用户
const confirmDelete = (user) => {
  // 检查是否是当前用户，防止自己删除自己
  const currentId = Number(currentUserId.value)
  const targetId = Number(user.id)
  
  if (currentId === targetId) {
    showNotification('不能删除自己的账号', 'error')
    return
  }
  
  userToDelete.value = user
  showDeleteConfirm.value = true
}

// 删除用户
const deleteUser = async () => {
  if (!userToDelete.value) return
  
  // 二次检查，确保不能删除自己的账号
  const currentId = Number(currentUserId.value)
  const targetId = Number(userToDelete.value.id)
  
  if (currentId === targetId) {
    showNotification('不能删除自己的账号', 'error')
    showDeleteConfirm.value = false
    return
  }
  
  try {
    await api.admin.deleteUser(userToDelete.value.id)
    
    // 关闭确认框
    showDeleteConfirm.value = false
    
    // 从列表中移除
    const index = users.value.findIndex(u => u.id === userToDelete.value.id)
    if (index !== -1) {
      users.value.splice(index, 1)
    }
    
    // 如果是当前查看的用户，关闭详情
    if (selectedUser.value && selectedUser.value.id === userToDelete.value.id) {
      showUserDetail.value = false
    }
    
    showNotification(`用户 ${userToDelete.value.username} 已被删除`, 'success')
    userToDelete.value = null
  } catch (error) {
    console.error('删除用户失败:', error)
    showNotification(error.message || '删除用户失败', 'error')
    showDeleteConfirm.value = false
  }
}

// 页面加载时获取数据
onMounted(() => {
  // 获取当前登录用户ID
  try {
    const userStr = localStorage.getItem('user')
    if (userStr) {
      const userData = JSON.parse(userStr)
      currentUserId.value = userData.id
      console.log('当前登录用户ID:', currentUserId.value)
    }
  } catch (error) {
    console.error('获取当前用户ID失败:', error)
  }
  
  fetchUsers()
})
</script>

<style scoped>
.user-management {
  padding: 0;
  width: 100%;
}

.page-title {
  margin-bottom: 1rem;
  font-size: 1.8rem;
  color: #374151;
}

/* 筛选和搜索栏样式 */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.search-box {
  position: relative;
  width: 300px;
}

.search-box input {
  width: 100%;
  padding: 0.75rem 1rem;
  padding-right: 2.5rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.875rem;
}

.search-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
}

.filters {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.filter select {
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: white;
  color: #374151;
  font-size: 0.875rem;
  cursor: pointer;
}

/* 表格样式 */
.user-list {
  width: 100%;
  overflow-x: auto;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

th {
  text-align: left;
  padding: 1rem;
  color: #374151;
  font-weight: 500;
}

td {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  color: #4b5563;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background-color: #f9fafb;
}

/* 徽章样式 */
.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-admin {
  background-color: #8b5cf6;
  color: white;
}

.badge-student {
  background-color: #3b82f6;
  color: white;
}

.badge-active {
  background-color: #10b981;
  color: white;
}

.badge-suspended {
  background-color: #ef4444;
  color: white;
}

/* 操作按钮样式 */
.actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  color: white;
}

.view-btn {
  background-color: #3b82f6;
}

.ban-btn {
  background-color: #ef4444;
}

.unban-btn {
  background-color: #10b981;
}

.reset-btn {
  background-color: #f59e0b;
}

.role-btn {
  background-color: #f59e0b;
}

.delete-btn {
  background-color: #ef4444;
}

/* 分页样式 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background-color: white;
  cursor: pointer;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 0.875rem;
  color: #6b7280;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #111827;
}

.close-btn {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 1.25rem;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.btn-cancel {
  background-color: #f3f4f6;
  color: #4b5563;
}

.btn-success {
  background-color: #10b981;
  color: white;
}

.btn-danger {
  background-color: #ef4444;
  color: white;
}

.btn-warning {
  background-color: #f59e0b;
  color: white;
}

.btn-info {
  background-color: #f59e0b;
  color: white;
}

/* 详情样式 */
.user-detail {
  margin-bottom: 2rem;
}

.detail-row {
  display: flex;
  margin-bottom: 0.75rem;
}

.detail-label {
  width: 100px;
  font-weight: 500;
  color: #4b5563;
}

.detail-value {
  flex: 1;
  color: #111827;
}

.detail-value.bio {
  white-space: pre-line;
}

.user-stats h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  color: #374151;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
}

.stat-item {
  background-color: #f9fafb;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}

.stat-item .stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #3b82f6;
  margin-bottom: 0.25rem;
}

.stat-item .stat-label {
  font-size: 0.75rem;
  color: #6b7280;
}

@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box {
    width: 100%;
  }
  
  .filters {
    width: 100%;
  }
  
  .modal-content {
    width: 95%;
  }
}

.header-with-back {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.back-btn {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  margin-right: 1rem;
  border-radius: 4px;
}

.back-btn:hover {
  background-color: #eff6ff;
}

.back-btn .el-icon {
  margin-right: 0.25rem;
}

.action-btn .el-icon,
.pagination-btn .el-icon,
.search-btn .el-icon,
.close-btn .el-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* 添加排序表头样式 */
.sortable-header {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.sortable-header:hover {
  background-color: #f3f4f6;
}

.sort-indicator {
  margin-left: 5px;
  color: #3b82f6;
  font-weight: bold;
}

.create-user-btn {
  background-color: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.create-user-btn:hover {
  background-color: #2563cc;
}

.create-user-btn .el-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* 表单样式 */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.form-field input,
.form-field select {
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.875rem;
}

.required {
  color: #ef4444;
}

.confirm-content {
  text-align: center;
  padding: 1rem;
}

.text-danger {
  color: #ef4444;
  font-weight: 500;
}

.btn-primary {
  background-color: #3b82f6;
  color: white;
}

.btn-primary:hover {
  background-color: #2563eb;
}

.current-user-badge {
  background-color: #3b82f6;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.form-note {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

.form-note.info {
  color: #6b7280;
  font-weight: 500;
}

.important {
  color: #ef4444;
  font-weight: 500;
}

.optional {
  color: #6b7280;
  font-weight: 500;
}

.optional-mark {
  font-size: 0.875rem;
  font-weight: normal;
}
</style> 